<template>
  <div class="three channel-item">
    <el-form
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="editor-plus-form"
      size="small"
    >
      <span class="share-row" v-hasPermi="['system:channel:edit']">
        <el-button
          type="primary"
          size="mini"
          @click="share()"
          v-if="!channelDetails.channelAid"
          >共享文章列表模板</el-button
        >
        <el-button type="primary" size="mini" @click="noShare" v-else
          >取消共享模板</el-button
        >
        <el-button type="primary" size="mini" @click="handleSharedCloumn"
          >查看共享的栏目</el-button
        >
        <!-- <el-button type="primary" size="mini">查看共享的栏目</el-button>aId{{channelDetails.aId}} -->
        <!-- <div v-if="share3.length>0"> -->
        <!-- <div v-if="false">
        <el-button type="primary" size="mini" @click="cacleShare()">取消共享</el-button>
        您已经选择将内容共享给栏目 <font color='red' v-for="(item,index) in share3" :key="index"> 《{{item}}》</font>
      </div> -->
        <span v-if="share3.length > 0">
          <!-- <div v-if="false"> -->
          <el-button type="primary" size="mini" @click="cacleShare()"
            >取消共享</el-button
          >
          您已经选择将内容共享给栏目
          <font color="red" v-for="(item, index) in share3" :key="index">
            《{{ item.label }}》</font
          > </span
        ><span v-if="share3From.length > 0">
          <!-- <div v-if="false"> -->
          共享栏目<font
            color="red"
            v-for="(item, index) in share3From"
            :key="index"
          >
            《{{ item.label }}》</font
          >
        </span>
      </span>
      <!-- <el-row class="edit-row"> -->
      <el-row>
        <el-col :span="24" style="height: 100%">
          <el-form-item label="文章内容模板" class="codeEditor">
            <EditorPlus
              ref="editorPlus"
              v-bind:template.sync="channelDetails.articleTemplate"
              @getTemplete="getTemplete"
            ></EditorPlus>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item v-if="false">
        <el-button type="primary" @click="submitForm('ruleForm')" size="mini"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')" size="mini">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import CodeEditor from "@/components/codeEditor";
import EditorPlus from "@/components/EditorPlus";
export default {
  props: {
    aId: {},
    channelAid: {},
    share3: {},
    share3From: {},
    channelDetails: Object,
  },
  data() {
    return {
      rules: {},
      radio1: "code",
    };
  },

  components: { CodeEditor, EditorPlus },

  computed: {},

  mounted() {
    this.$nextTick(() => {
      this.$refs.editorPlus.radio1 = "view";
      // this.$emit("viewShareCloumn", "A");
    });
  },

  watch: {},

  methods: {
    share() {
      let arr = []; //当前选择的，保存和没保存的。
      this.share3.forEach((item) => {
        arr.push(item.value);
      });
      this.$emit("shareCloumn", "A", arr);
    },
    handleSharedCloumn() {
      this.$emit("handleSharedCloumn", "A");
    },
    noShare() {
      this.$emit("update:channelAid", 0);
    },
    //共享源取消共享   不要
    cacleShare() {
      this.$emit("update:aId", null);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getTemplete(template) {
      // this.$emit("getCode", { tab: "three", template: template });
    },
  },
};
</script>

<style scoped lang="scss">
@import "~@/assets/styles/el-form.scss";
.three {
  // padding: 0 100px;
  max-width: 1100px;
  margin: 0 auto;
}
// ::v-deep .codeEditor {
//   .el-form-item__content {
//     height: 500px;
//   }
// }
</style>
